<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>元素样式/尺寸操作</title>
		<!-- 元素样式操作：针对css样式的属性和属性值 
		css（）          功能：添加任何样式下的属性和属性值
		                 1个参:获取匹配集合元素中第一个元素的css属性值
						 2个参:设置匹配集合元素中所有元素的属性和属性值
						 n个参:多层设置匹配集合元素中所有元素的属性和属性值
						 语法糖：css({"属性"："属性值"，"属性"："属性值"})
						 .btn{
							 border:1px solid red;
						 }
		height()和width()                 功能：匹配集合元素中第一个元素的高度和宽度值
		                                  无参：获取匹配集合元素中第一个元素的高度和宽度指
										  有参：设置匹配集合元素中第一个元素的高度和宽度指
		outHeight()和outwidth()           功能:元素的宽高度
		                                  无参：获取元素宽高度，包含内边距+边框
										  有参：只允许传bool值，true外加一个外边距
										  
		
		-->
		<style>
			.box{
				background-color: aqua;
				padding: 20px;
				margin: 20px;
				border: 5px solid red;
				}
			.result{
				margin-top: 10px;
				font-weight: 700;
			}
		</style>
		<script src="../js/jquery-1.11.1.js"></script>
	</head>
	<body>
		<!-- box添加样式属性：背景色。-->
		<!-- 1.显示效果区域 -->
		<div class="box" id="targetBox"></div>
		<button id="getColorBtn">获取背景颜色</button>
		<button id="setColorBtn">设置背景颜色</button>
		<button id="setBtn">设置多层效果</button>
		<button id="getWidthBtn">获取元素宽度</button>
		<button id="gbpBtn">获取元素高度【包含内边距+边框】</button>
		<button id="bpmBtn">获取元素高度【包含内边距+边框+外边距】</button>
		<!-- 显示效果提示区 -->
		<div id="result" class="result"></div>
		<script>
			/* 1.点击 湖片区背景颜色 阿牛获取北京颜色值 */
			$("#getColorBtn").click(function(){
				// jq css("属性名") 获取属性值
				var bgColor=$(".box").css("background-color");
				// 显示区域--提示：获取颜色是
				$("#result").text("获取背景颜色值是："+bgColor);
			});
			// 2.点击 设置背景颜色 按钮 设置背景颜色值
			$("#setColorBtn").click(function(){
				$(".box").css("background-color","orange");
				//result添加文本：效果修改为橙色
				$("#result").text("效果修改为橙色");
			});
		   // 3.点击 设置多层效果 按钮  设置效果如下：背景色、倒角、盒子阴影
			$("#setBtn").click(function(){
				$(".box").css({"background-color":"#e4393c",
				               "border-radius":"50%",
							   "box-shadow":"5px 5px 10px #ff0",
							   "width":"100px",
							   "height":"100px"
				});
			}); 
			//4.点击 获取元素宽度 按钮 获取当前元素 的宽高度
			$("#getWidthBtn").click(function(){
				var w=$(".box").width();
				$("#result").text("获取宽度是："+w+"px");
			});
				// 5.点击 获取元素宽度 按钮 算高度是？
				$("#gbpBtn").click(function(){
					var gbp=$(".box").outerHeight();
					$("#result").text("高度为："+gbp+"px");
				});
				//6.点击 获取元素高度 
				$("#bpmBtn").click(function(){
					var bpm=$(".box").outerHeight(true);
					$("#result").text("高度为："+bpm+"px");
				}); 
		</script>
	</body>
</html>